<template>
  <div >
    <div class="sub-title">
      <div style="position: absolute; cursor: pointer; padding: 12px;" @click="cancel">
        <i class="el-icon-back" ></i>
      </div>
      <div style="padding: 13px;">{{logMark.logOwnerName}}的日志 <span style="font-size: 12px">{{logMark.logTimeStr}}</span></div>
    </div>
    <div id="board-box" v-for="log in logMark.logs">
      <div style="line-height: 16px; font-weight: bold; font-size: 14px">
        <i :class="'iconfont '+ log.icon" :style="'color:'+log.color"></i>
        {{log.projectName}} <br>
<!--        <span v-if="log.projectId>1" style="font-size:10px;padding-left: 18px">
           {{log.planStartTime}} 至 {{log.planEndTime}}  <span v-if="log.projectId>1"> 状态：{{getDescription(log)}} </span>
          </span>-->
      </div>
      <div style="position: relative; line-height: 20px; padding: 15px 0;">
        <div style="padding-left:20px;" v-html="log.logContent.replace(/\n/g,'<br/>')"></div>
      </div>
      <img-viewer :data="log.attachmentList"></img-viewer>
      <comment :userInfo="userInfo" :members="members" :log="log"></comment>
    </div>
    <div style="border:8px solid whitesmoke; border-left:0; border-right:0; padding: 5px 20px;height:150px;">
      <el-tabs v-model="readFlag" @tab-click="handleClick">
        <el-tab-pane name="0">
          <span slot="label" style="padding: 10px 25px;">已读 {{getHasReadUser().length}}</span>
          <div style="padding-left: 10px;">
            <div style="float: left" v-for="item in getHasReadUser()">
              <img class="avatar"  :src="item.avatar+'_60x60q90.jpg'"  />
              <div style="padding: 3px" class="small">{{item.name}}</div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="1">
          <span slot="label" style="padding: 10px 25px;">未读 {{getUnReadUserLength()}}</span>
          <div style="padding-left: 10px;">
            <div style="float: left" v-for="item in logMark.unReadUsers">
              <img class="avatar"  :src="item.avatar+'_60x60q90.jpg'"  />
              <div style="padding: 3px" class="small">{{item.name}}</div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <ding-login ref="gate"></ding-login>
      <el-button-group size="mini" style="position:fixed; right:20px; bottom: 30px;">
        <el-button :disabled="hasPref===false" @click="pref()">上一条</el-button>
        <el-button :disabled="hasNext===false" @click="next()">下一条</el-button>
      </el-button-group>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import DingLogin from '@/components/ding/ding-login'
  import Comment from '@/components/ding/comment'
  import ImgViewer from '@/components/common/img-viewer'

  export default {
    data () {
      return {
        markId:'',
        logFlag: 0,
        logMark:{},
        members: [],
        hasPref: false,
        hasNext: false,
        readFlag: 0
      }
    },
    mixins: [dingMixin],
    computed:{

    },
    mounted(){
      this.$refs.gate.login().then(()=>{
        //this.run_dd_config();
        this.markId = this.$route.query.markId
        this.logFlag = this.$route.query.logFlag
        this.loadMembers().then(data=>this.members = data);
        this.getLogById()
      })
    },
    components:{
      Comment, DingLogin, ImgViewer
    },
    methods: {
      handleClick(){

      },
      cancel(){
        history.go(-1);
      },
      pref(){
        this.getLogById(1)
      },
      next(){
        this.getLogById(-1)
      },
      toggleComment(item){
        item.showComment=!item.showComment
        this.$forceUpdate()
      },
      getLogById(offset=0){
        this.$http({
          url: this.$http.adornUrl(`/wpb/logmark/detail`),
          method: 'post',
          params: this.$http.adornParams({
            markId:  this.markId,
            logFlag: this.logFlag,
            offset: offset
          })
        }).then(({data}) => {
            if (data && data.code === 0) {
                this.logMark = data.logMark;
                this.markId = data.logMark.id;
                this.hasPref = data.logMark.hasPref;
                this.hasNext = data.logMark.hasNext;
            }
          }
        ).catch(error=>{
          console.info(error)
        })
      },
      getHasReadUser(){
        let res = [];
        if(this.logMark.ccUsers){
          for(let user of this.logMark.ccUsers){
            let found = false;
            for(let t of this.logMark.unReadUsers){
              if(user.emplId === t.emplId){
                found = true;
              }
            }
            if(!found){
              res.push(user);
            }
          }
        }
        return res;
      },
      getUnReadUserLength(){
        if(this.logMark.unReadUsers)
          return this.logMark.unReadUsers.length
        return ''
      },
      getDescription(logItem){
        if(logItem.status==1){
          return "进行中";
        }
        else if(logItem.status==2){
          return "已完成";
        }
        else if(logItem.status==3){
          return "已逾期";
        }
        else if(logItem.status==4){
          return "逾期已完成";
        }
      }
    },
  }
</script>
<style scoped>

  .sub-title {
    background: white;
    width:100%;
    height:45px;
    font-size: 18px;
    text-align: center;
    border-bottom: lightgray solid 1px;
    margin-bottom: 40px;
    position: relative;
  }

  #board-box{
    padding: 0 20px;
    margin-bottom: 40px;
    line-height: 30px;
  }

  .avatar{
    width: 36px;
    height: auto;
    margin-right: 20px;
    border-radius: 100%;
    vertical-align: middle;
  }

  .small{
    font-size: 12px;
    color:gray;
  }

  i:before{
    font-size: 14px;
  }

  .chart-box {
    min-height: 400px;
  }
  .feedback{
    position: relative;
    left:15px;
  }

  .delc{
    cursor: pointer; margin-left: 15px; color:gray; font-size: 10px;
  }

</style>
